<template>
  <div class="doumee-filter">
    <el-form inline label-suffix="：" @submit.native.prevent>
      <template v-for="item in queryFormConfig.formItems">
        <el-form-item v-if="item.type === 'input'" :key="item.filed" :label="item.label">
          <el-input
            v-model="searchForm[item.filed]"
            :clearable="item.clearable || true"
            :placeholder="item.placeholder || '请输入'"
            class="w200"
          />
        </el-form-item>
        <el-form-item v-if="item.type === 'select'" :key="item.filed" :label="item.label">
          <el-select
            v-model="searchForm[item.filed]"
            :clearable="item.clearable || true"
            :placeholder="item.placeholder || '请选择'"
            class="w200"
          >
            <el-option v-for="opt,i in item.options" :key="i" :value="opt.value" :label="opt.label" />
          </el-select>
        </el-form-item>
        <el-form-item v-if="item.type === 'date'" :key="item.filed" :label="item.label || '日期'">
          <el-date-picker
            v-model="searchForm[item.filed]"
            type="date"
            value-format="yyyy-MM-dd"
            class="w200"
            :clearable="item.clearable || true"
            :placeholder="item.placeholder || '请选择日期'"
          />
        </el-form-item>
        <el-form-item v-if="item.type === 'daterange'" :key="item.filed" :label="item.label || '选择日期'">
          <el-date-picker
            v-model="searchForm[item.filed]"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="至"
            :clearable="item.clearable || true"
            :start-placeholder="item.start || '开始日期'"
            :end-placeholder="item.end || '结束日期'"
            class="w400"
          />
        </el-form-item>
      </template>
      <!-- 操作 -->
      <el-form-item>
        <el-button type="primary" @click="handleQuery">查找</el-button>
        <el-button @click="clear">清空</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Object,
      default: () => {}
    },
    queryFormConfig: {
      type: Object,
      default: () => {}
    }
  },
  emits: ['input', 'handleQuery', 'clear'],
  computed: {
    searchForm: {
      get() {
        return this.value
      },
      set(value) {
        this.$emit('input', value)
      }
    }
  },
  methods: {
    handleQuery() {
      this.$emit('handleQuery')
    },
    clear() {
      this.$emit('clear')
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
